	/*
	$(document).ready(function(){
	  $("button").click(function(){
		window.setTimeout(function(){
		  $(location).attr('href', 'index.html');
		}, 2000);
		 
	  });
	});
	*/
	$(document).ready(function(){
		$("#submitBtn").click(function(){
			console.log("version 1");
			let form = $('#loginForm');
			let data = new FormData(form[0]);
			logFormData(data);
			//note: the form could only get data from "name" property 
			let username = data.get('username');
			console.log('username: ' + username);
			let password = data.get('password');
			if(username != 'Thomas' || password != 'myPass'){
				console.log('Failure to validate !');
				//return;
				//event.preventDefault();
				//event.stopPropagation();
			}
			//console.log($('#username').value);

			// disable button
			  $(this).prop("disabled", true);
			  // add spinner to button
			  $(this).html(
				`<span class="spinner-border spinner-border" role="status" aria-hidden="true"></span>Loading...`
			  );
			  
			setTimeout(function(){$("#loginForm").submit();}, 5000); 
			console.log("end");
		});
	});
		
	let logFormData = function(formData){
		try{
			//let entries =  formData.entries();
			//entries.forEach is not a function
			/*
			entries.forEach(function(pair){
				console.log(pair[0] + ',' + pair[1]);
			});
			*/
			for(let pair of formData.entries()) {
			   console.log(pair[0]+ ', '+ pair[1]); 
			}
		}catch(error){
			console.log('Failed to log data: ' + error.message);
		}
	};
			